const sortEle = document.querySelector('.sort')
const dishEle = document.querySelector('.dish')
/**-------------清除所有样式  给自己添加新的样式------*/
function onTab() {
    let ulEle = document.querySelectorAll('.sort>li')
    let olEle = document.querySelectorAll('.dish>li')
    for (let i = 1; i < ulEle.length; i++) {
        ulEle[i].setAttribute('data-index', i) //自定义属性
        ulEle[i].addEventListener('click', function () {
            clear()
            this.className = 'current'

            let index = ulEle[i].getAttribute('data-index')
            olEle[index].className = 'on'
        })
    }

    function clear() {
        for (let i = 0; i < ulEle.length; i++) {
            ulEle[i].className = ''
            olEle[i].className = ''
        }
    }
}

function onDish() {
    ajaxPromise({
        method: 'get',
        url: 'http://localhost:8088/api/shop/list'
    }).then(data => {
        let info = data.resultInfo.list
        console.log(data.resultInfo.list)
        showSart(info)
        showDish(info)
        onTab()
    }).catch(error => {
        console.log('网络请求出错')
    })

    // 商品列表
    function showSart(sortList) {
        let sortArr = sortList.map(item => {
            return `
               <li>${item.categoryname}</li>
               `
        }).join('')
        sortEle.innerHTML = sortArr
    }

    // 菜品区
    function showDish(dishList) {
        let dishArr = dishList.map(item => {
            return `
            <li class="on">
               <div class="con">
                   <div>
                    <img src="${item.picture}" alt="图片">
                    </div>
                    <div>
                        <h5>${item.product}</h5><span>￥${item.price}</span>
                    </div>
                </div>
            </li>
            
                   `
        }).join('')
        dishEle.innerHTML = dishArr
    }
}

onDish() 